﻿<template>
  <div>
    <a-card :bordered="false" :bodyStyle="tstyle">

      <div class="table-page-search-wrapper" v-if="hasPerm('WmsTask:page')">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="任务号">
                <a-input v-model="queryParam.taskno" allow-clear placeholder="请输入任务号" />
              </a-form-item>
            </a-col><a-col :md="8" :sm="24">
              <a-form-item label="任务方式">
                <a-select :allowClear="true" style="width: 100%" v-model="queryParam.taskmodel" placeholder="请选择任务方式">
                  <a-select-option v-for="(item, index) in taskmodelData" :key="index" :value="item.code">{{ item.name
                  }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col><template v-if="advanced"><a-col :md="8" :sm="24">
                <a-form-item label="任务类型">
                  <a-select :allowClear="true" style="width: 100%" v-model="queryParam.tasktype" placeholder="请选择任务类型">
                    <a-select-option v-for="(item, index) in tasktypeData" :key="index" :value="item.code">{{ item.name
                    }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col><a-col :md="8" :sm="24">
                <a-form-item label="任务状态">
                  <a-select :allowClear="true" style="width: 100%" v-model="queryParam.taskstatus" placeholder="请选择任务状态">
                    <a-select-option v-for="(item, index) in taskstatusData" :key="index" :value="item.code">{{ item.name
                    }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="托盘编号">
                  <a-input v-model="queryParam.containerCode" allow-clear placeholder="请输入托盘编号" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="起始库位">
                  <a-input v-model="queryParam.sourceplace" allow-clear placeholder="请输入起始库位" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="目标库位">
                  <a-input v-model="queryParam.toplace" allow-clear placeholder="请输入目标库位" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="库区名称">
                  <a-select :allowClear="true" style="width: 100%" v-model="queryParam.areaName" placeholder="请选择库区名称">
                    <a-select-option v-for="(item, index) in areaNameData" :key="index" :value="item.areaName">{{
                      item.areaName }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col> 
            </template>

            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
                <a @click="toggleAdvanced" style="margin-left: 8px"> {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'" />
                </a>
              </span>
            </a-col>

          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card :bordered="false">
      <s-table ref="table" :columns="columns" :data="loadData" :alert="true" :rowKey="(record) => record.id">
        <span slot="taskmodelscopedSlots" slot-scope="text">
          <a-tag :color="text === 1 ? '#2db7f5' : '#87d068'">{{ 'task_model' | dictType(text) }}</a-tag>
        </span>
        <span slot="tasktypescopedSlots" slot-scope="text">
          <a-tag :color="text === 1 ? '#2db7f5' : '#87d068'">{{ 'task_type' | dictType(text) }}</a-tag>
        </span>
        <span slot="taskstatusscopedSlots" slot-scope="text">
          <a-tag :color="text === 1 ? '#2db7f5' : (text === 2 ? '#108ee9' : '#87d068')">{{ 'task_status' | dictType(text) }}</a-tag>
        </span>
        <template slot="aisledSlots" slot-scope="text,record">
          {{ record.aisle | enumsName(aisleList,'code','name') }}
        </template>
        <span slot="eqpScopedSlots" slot-scope="text">
          <a-tag :color="text === 2 ? '#0000FF' : (
            text === 3 ? '#00FFFF' : (
              text === 5 ? '#FFD700' : (
                text === 6 ? '#87d068' : '#808080'
              )
            )
          )">
            {{ 'zz_task_dodevice_status' | dictType(text) }}
          </a-tag>
        </span>
        <span slot="taskdodevice_status" slot-scope="text">
          {{ 'taskdodevice_statusenum' | dictType(text) }}
        </span>
        <template slot="agvStatusSlots" slot-scope="text,record">
          {{ record.agvTaskDodeviceStatusEnum | enumsName(agvStatusEnums,'code','name') }}
        </template>
        <template slot="linkSlot" slot-scope="text,record">
          <a @click="onOpenInfo(record)">{{ text }}</a>
        </template>
        <div slot="action" slot-scope="text, record">
          <a @click="onFinish(record)">完成</a>
          <!-- <a-divider type="vertical" />
          <a @click="onOpenPriorityModal(record)">优先级</a> -->
          <a-divider type="vertical" />
          <a @click="onCancel(record)">取消</a>
        </div>
      </s-table>
    </a-card>

    <detail-drawer :visible.sync="infoVisible" :row="infoRow" />
    <priority-modal :visible.sync="priorityVisible" :row="priorityRow" @confirm="onCallbackPriority" />
  </div>
</template>
<script>
import { STable } from '@/components'
import { WmsTaskPage, WmsTaskCancel, WmsTaskFinish } from '@/api/modular/main/WmsTaskManage'
import { GetZuzhuangAreas } from '@/api/modular/main/WmsAreaManage'
import DetailDrawer from './DetailDrawer.vue'
import PriorityModal from './PriorityModal.vue'
export default {
  components: {
    STable,
    DetailDrawer,
    PriorityModal
  },
  data() {
    return {
      advanced: false, // 高级搜索 展开/关闭
      queryParam: {},
      aisleList: [],
      agvStatusEnums: [],
      columns: [
        {
          title: '任务号',
          align: 'center',
          sorter: true,
          dataIndex: 'taskNo',
          scopedSlots: { customRender: 'linkSlot' }
        },
        {
          title: '任务方式',
          align: 'center',
          dataIndex: 'taskModel',
          scopedSlots: { customRender: 'taskmodelscopedSlots' }
        },
        {
          title: '任务类型',
          align: 'center',
          dataIndex: 'taskType',
          scopedSlots: { customRender: 'tasktypescopedSlots' }
        },
        {
          title: '任务状态',
          align: 'center',
          dataIndex: 'taskStatus',
          scopedSlots: { customRender: 'taskstatusscopedSlots' }
        },
        {
          title: '托盘编号',
          align: 'center',
          dataIndex: 'containerCode'
        },
        {
          title: '起始库位',
          align: 'center',
          dataIndex: 'sourcePlace'
        },
        {
          title: '目标库位',
          align: 'center',
          dataIndex: 'toPlace'
        },
        {
          title: '库区名称',
          align: 'center',
          dataIndex: 'areaName'
        },
        {
          title: '入库来源',
          align: 'center',
          dataIndex: 'description'
        },
        {
          title: '设备状态',
          align: 'center',
          dataIndex: 'taskDodeviceStatus',
          scopedSlots: { customRender: 'taskdodevice_status' }
        },
        {
          title: '创建时间',
          align: 'center',
          dataIndex: 'createdTime',
          width: 170
        },
        {
          title: '更新时间',
          align: 'center',
          dataIndex: 'updatedTime',
          width: 170
        }
      ],
      tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return WmsTaskPage(Object.assign(parameter, this.queryParam)).then((res) => {
          return res.data
        })
      },
      taskmodelData: [],
      tasktypeData: [],
      taskstatusData: [],
      areaNameData: [],
      selectedRowKeys: [],
      selectedRows: [],
      infoVisible: false,
      infoRow: {},
      priorityVisible: false,
      priorityRow: {}
    }
  },
  created() {
    if (this.hasPerm('WmsTask:edit') || this.hasPerm('WmsTask:delete')) {
      this.columns.push({
        title: '操作',
        width: '120px',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
      })
    }
    const taskmodelOption = this.$options
    this.taskmodelData = taskmodelOption.filters['dictData']('task_model')
    const tasktypeOption = this.$options
    this.tasktypeData = tasktypeOption.filters['dictData']('task_type')
    const taskstatusOption = this.$options
    this.taskstatusData = taskstatusOption.filters['dictData']('task_status')
    this.aisleList = this.$options.filters['dictData']('les_aisle')
    this.agvStatusEnums = this.$options.filters['dictData']('agv_task_dodevice_status')
  },
  mounted() {
    this.getAreas()
  },
  methods: {
    getAreas() {
      GetZuzhuangAreas().then((d) => {
        this.areaNameData = d.data || []
      }).catch(() => {

      })
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    onOpenInfo(row) {
      this.infoRow = row;
      this.infoVisible = true
    },
    onOpenPriorityModal(row) {
      this.priorityRow = row;
      this.priorityVisible = true
    },
    onCallbackPriority() {
      this.$refs.table.refresh()
    },
    onFinish(row) {
      this.$confirm({
        title: '操作确认',
        content: '确定要进行强制完成操作吗？',
        onOk: () => {
          this.dealFinish(row.id)
        }
      });
    },
    dealFinish(id) {
      WmsTaskFinish(id).then(() => {
        this.$message.success('操作成功');
        this.$refs.table.refresh()
      }).catch(() => { })
    },
    onCancel(row) {
      this.$confirm({
        title: '操作确认',
        content: '确定要进行取消操作吗？',
        onOk: () => {
          this.dealCalcel(row.id)
        }
      });
    },
    dealCalcel(id) {
      WmsTaskCancel(id).then(() => {
        this.$message.success('操作成功');
        this.$refs.table.refresh()
      }).catch(() => { })
    }
  }
}
</script>
<style lang="less">
.table-operator {
  margin-bottom: 18px;
}

button {
  margin-right: 8px;
}
</style>
